<template>
	<view>
		<view style="padding:20rpx 10rpx 0;">{{title}}</view>
		<view style="margin-top: 20rpx;background-color: #ffffff;margin-bottom: 20rpx;">
			<view class="list-box-method">
				<textarea v-model="content" style="width: 100%;height: 250rpx;padding: 20rpx 0;" placeholder="请输入反馈内容"
					maxlength="200"></textarea>
			</view>
		</view>
		<view style="margin-top: 20rpx;background-color: #ffffff;margin-bottom: 20rpx;">
			<text
				style="margin-left: 2%;font-size: 32rpx;font-weight: 600;height: 120rpx;line-height: 120rpx;">相关截图</text>
			<view class="list-box-method" style="padding-bottom: 20rpx;">
				<view v-for="(item,i) in imglist" :key="item" class="imgitem">
					<image :src="item" mode="widthFix" class="imgitems"></image>
					<image src="../../../static/icons/mine/del.png" class="del" @click="delimg(i)"></image>
				</view>
				<view class="righticon" @click="chooseImage">
					<image class="imgadd" src="../../../static/icons/mine/add.png"></image>
				</view>
			</view>
		</view>
		<view style="margin-top: 20rpx;background-color: #ffffff;margin-bottom: 20rpx;">
			<text
				style="margin-left: 2%;font-size: 32rpx;font-weight: 600;height: 120rpx;line-height: 120rpx;">联系方式</text>
			<view class="list-box-method">
				<input type="text" v-model="mobile" style="width: 100%;height: 100rpx;" placeholder="联系邮箱/电话" />
			</view>
		</view>
		
		<view style="text-align: center;margin-top: 64rpx;" class="btn" @click="take">
			<!-- <view class="btntext fweight500 fsize36 black">充值记录</view> -->
			<view class="btntext fweight500 fsize36 black">提交</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import {
		complain
	} from "@/api/user";
	import {
		ref
	} from 'vue'
	import {
		onLoad,
		onPullDownRefresh,
		onReachBottom
	} from '@dcloudio/uni-app';
	let title = ref("")
	let content = ref("")
	let mobile = ref("")
	let imglist = ref([])
	onLoad((option) => {
		title.value = option.title
	})
	function delimg(i) {
		imglist.value.splice(i)
	}

	function chooseImage() {
		uni.chooseImage({
			success: chooseImageRes => {
				const tempFilePaths = chooseImageRes.tempFilePaths;
				uni.uploadFile({
					url: import.meta.env.VITE_BASE_URL + '/v1/fs/native/upload', // 你的上传地址
					filePath: tempFilePaths[0],
					name: 'file', // 这里根据后端需要的字段来定义
					success: uploadFileRes => {
						console.log(JSON.parse(uploadFileRes.data))
						let Res = JSON.parse(uploadFileRes.data)
						if (Res.code == 0) {
							imglist.value.push(Res.data.url)
						} else {
							uni.showToast({
								title: "网络繁忙，稍后再试",
								icon: 'none'
							})
						}
						// 处理上传成功的结果
					},
					fail: uploadFileError => {
						uni.showToast({
							title: "网络繁忙，稍后再试",
							icon: 'none'
						})
						// 处理上传失败的错误
					}
				});
			}
		});
	}
	async function take() {
		if (!(content.value.replace(/\s*/g, ""))) {
			uni.showToast({
				title: '请填写反馈内容',
				icon: "none"
			});
			return
		}
		if (content.value.length < 10) {
			uni.showToast({
				title: '描述内容不少于10字',
				icon: "none"
			});
			return
		}
		if (!(mobile.value.replace(/\s*/g, ""))) {
			uni.showToast({
				title: '请填写联系方式',
				icon: "none"
			});
			return
		}
		var obj = {
			desc: content.value,
			contact: mobile.value,
			images: imglist.value
		}
		var res = await complain(obj)
		uni.showToast({
			title: '反馈提交成功',
			icon: "none"
		});
		setTimeout(() => {
			uni.navigateBack(-1)
		}, 200)

	}
</script>

<style lang="scss">
	.imgitem {
		display: flex;
		position: relative;
		margin-right: 20rpx;
		margin-bottom: 20rpx;
		.imgitems {
			width: 120rpx;
			height: 120rpx;
		}

		.del {
			position: absolute;
			right: -11rpx;
			top: -11rpx;
			width: 40rpx;
			height: 40rpx;
			z-index: 22;
		}
	}

	.righticon {
		width: 120rpx;
		height: 120rpx;
		border-radius: 20rpx;
		border: solid 2rpx #333333;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: row;

		.imgadd {
			width: 80rpx;
			height: 80rpx;
		}
	}

	page {
		background-color: #f6f6f6;
		color: #333333;
	}

	.btn {
		width: 90%;
		position: fixed;
		left: 5%;
		bottom: 60rpx;
		z-index: 333;

		.btntext {
			width: 100%;
			height: 88rpx;
			background: linear-gradient(to right, rgba(218, 255, 129, 1), rgba(95, 253, 240, 1));
			background-position: center;
			background-repeat: no-repeat;
			background-size: 100%;
			line-height: 88rpx;
			border-radius: 50rpx;
			margin-top: 20rpx;
		}
	}

	.list-box-method {
		display: flex;
		flex-direction: row;
		width: 96%;
		margin-left: 2%;
		flex-wrap: wrap;

		.item-method {
			width: 32%;
			margin-right: 1%;
			height: 80rpx;
			line-height: 80rpx;
			margin-bottom: 20rpx;
			border: solid 2rpx #222222;
			border-radius: 10rpx;
			text-align: center;
		}

		.wanl-yellow-item {
			border-radius: 10rpx;
			border: solid 2rpx #2979ff;
			color: #2979ff;
		}
	}
</style>